<template>
  <transition name="drawer">
    <div :style="{ width: isData ? '1440px' : '1640px' }" class="scorllBox" v-if="showDrawer">
      <div class="drawer">
        <div class="primary-retract" @click="open(false)">
          <span>收</span>
          <span>起</span>
          <span class="white"
            ><el-icon color="#409eff" size="10"><ArrowRight /></el-icon
          ></span>
        </div>
        <div class="drawer-content" v-loading="isLoading">
          <Details
            :listMap="listMap"
            :wecomItem="wecomItem"
            :wecomType="wecomType"
            @searchFilter="searchFilter"
            :params="params"
            :totals="totals"
            @setPage="setPage"
            @setFilterTime="setFilterTime"
            @employeeGroupList="employeeGroupList"
            @setWidth="setWidth"
          />
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import Details from './details.vue'
import * as customerApi from '@/api/wecom/customer/index'
import * as apiConfig from '@/api/wecom/apiconfig/index'
import * as chatGroupApi from '@/api/wecom/chatgroup/index'
import getDateFn from '@/views/Home/getDateFn'

defineOptions({ name: 'WeCustomerDetail' })

const detailRef = ref(null)
const wecomItem = ref('')
const wecomType = ref(1)
const isLoading = ref(false)
const showDrawer = ref(false) // 抽屉的是否展示
const isData = ref(false)
const totals = ref(0)
const params = ref({
  pageNo: 1,
  pageSize: 20,
  lastChatTime: [],
  name: ''
})
/** 打开弹窗 */
const open = async (value, item, type) => {
  showDrawer.value = value
  params.value.pageNo = 1
  if (value) {
    wecomItem.value = item
    wecomType.value = type
    params.value.lastChatTime = []
    if (type == 1) {
      // customerConversation()
    } else if (type == 2) {
      employeeConversation()
    } else {
      groupConversation()
    }
  }
}
defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗

const listMap = ref([])
// 客户会话
// const customerConversation = async () => {
//   const { list } = await customerApi.getUserListByCustomer({
//     weCustomerId: wecomItem.value.externalUserId
//   })
//   listMap.value = list
// }
// 员工会话/员工组分页
const setPage = (val, index) => {
  params.value.pageNo = val.page
  if (index == 0) {
    employeeConversation()
  } else {
    employeeGroupList()
  }
}
const timerMap = {
  0: getDateFn.getDate() + ' 00:00:00' + ' ~ ' + getDateFn.getDate() + ' 23:59:59',
  1: getDateFn.getDate(-1) + ' 00:00:00' + ' ~ ' + getDateFn.getDate(-1) + ' 23:59:59',
  2: getDateFn.getMonday('s') + ' 00:00:00' + ' ~ ' + getDateFn.getMonday('e') + ' 23:59:59'
}
// 员工会话时间过滤
const setFilterTime = (val, index) => {
  params.value.pageNo = 1
  params.value.lastChatTime = val != 3 ? timerMap[val].split('~').map((i) => i.trim()) : []
  if (index == 0) {
    employeeConversation()
  } else {
    employeeGroupList()
  }
}
// 员工会话
const employeeConversation = async () => {
  const data = await apiConfig.listByUser({ qwUserId: wecomItem.value.weUserId, ...params.value })
  listMap.value = data.list || []
  totals.value = data.total
}
// 员工的群列表
const employeeGroupList = async (value) => {
  if (value) params.value.pageNo = value
  const data = await chatGroupApi.getWeChatGroupPage({
    weUserId: wecomItem.value.weUserId,
    ...params.value
  })
  listMap.value = data.list || []
  totals.value = data.total
}
const cloneMap = ref(null)
// 群会话
const groupConversation = async () => {
  const data = await chatGroupApi.getChatGroupList({
    weChatId: wecomItem.value.chatId
  })
  listMap.value = data
  cloneMap.value = JSON.parse(JSON.stringify(data))
}

// 搜索
const searchFilter = (value, index) => {
  params.value.pageNo = 1
  params.value.name = value
  if (wecomType.value == 2) {
    if (index == 0) {
      employeeConversation()
    } else {
      employeeGroupList()
    }
  } else if (wecomType.value == 3) {
    if (value) {
      listMap.value = cloneMap.value.filter((item) => item.name.includes(value))
    } else {
      groupConversation()
    }
  }
}
const setWidth = (value) => {
  isData.value = value
}
</script>

<style lang="scss" scoped>
.scorllBox {
  position: fixed;
  bottom: -1px;
  right: 0;
  height: calc(100% - 86px);
  overflow: hidden;
  z-index: 10;
  box-shadow: 5px 5px 5px #888888;
  .drawer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    z-index: 999;
    $txtFontSize: 13px;
    .primary-retract {
      width: 40px;
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background-color: #0052cc;
      color: #fff;
      border-radius: 4px 0 0 4px;
      margin-top: 20%;
      font-size: $txtFontSize;
      .white {
        width: 12px;
        height: 12px;
        text-align: center;
        line-height: 12px;
        border-radius: 50%;
        background-color: #fff;
        margin-top: 5px;
      }
    }
    :deep(.drawer-content) {
      width: 100%;
      background-color: #f5f7f9;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
      display: flex;
      height: 100%;
      overflow: hidden;
    }
  }
}
.drawer-enter-active,
.drawer-leave-active {
  transition: transform 1.2s ease-out;
}
.drawer-enter-from,
.drawer-leave-to {
  transform: translateX(100%);
}
</style>
